<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器_动态伪类</title>
    <style>

        /*需要注意的是,伪类选择器的书写顺序很重要也符合(后来者居上原则)
        如果乱写的话可能会导致对应的状态不显示对应的效果
        最完美的顺序就是当前的顺序l v h a

        link和visited是超链接a元素独有的两种状态

        由于状态时可以动态变化的,所以这一类也叫做动态伪类
        */

        /*选中没有访问过的a元素*/
        a:link {
            color: orange;
        }

        /*选中访问过的a元素*/
        a:visited {
            color: #4b6aff;
        }

        /*鼠标悬停:当鼠标悬停在a标签是被选择*/
        a:hover {
            color: green;
        }

        /*激活状态:按下鼠标不松手*/
        a:active {
            color: black;
        }

        /*选中获得焦点时的状态,该状态只针对有输入的标签
        例如:input,select,textarea
        */
        input:focus {
            color: black;
            background-color: bisque;
        }

        span:hover {
            color: aqua;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">去百度</a>
<a href="https://www.jd.com">去京东</a>
<span>前端</span>
<br>
<label><input type="text"></label>


</body>
</html>